<template>
    <div>
        <!-- 单位组件 -->
        <div class="cpt-page">
            <div class="cpt-page-header cpt-page-header-flex">
                <div class="flex-left">
                    <el-button type="primary" @click="doSub">确认</el-button>
                </div>
                <div class="flex-right">
                    <el-input v-model="query.name" class="search-input-class border" placeholder="用户名" />
                    <el-button type="primary" @click="loadData">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
            <div class="cpt-content">
                <el-table
                    ref="datagrid"
                    :data="table.data"
                    border
                    height="360"
                    @row-click="handleClickTableRow"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="name" label="单位名称" show-overflow-tooltip />
                    <el-table-column prop="typeName" label="单位类型" width="120" />
                    <el-table-column prop="characterName" label="企业性质" width="120" />
                    <el-table-column prop="province" label="省" width="120" show-overflow-tooltip />
                    <el-table-column prop="city" label="市" width="120" show-overflow-tooltip />
                    <el-table-column
                        prop="importanceDegree"
                        label="重要程度"
                        width="100"
                        :formatter="importanceFormatter"
                    />
                </el-table>
            </div>
            <div class="cpt-footer">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="table.pagination.currentPage"
                    :page-sizes="table.pagination.pageSizes"
                    :page-size="table.pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="table.pagination.total"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'

const props = defineProps({
    single: {
        type: Boolean,
        default: true
    }
})

const emit = defineEmits(['select'])

const datagrid = ref(null)

const query = reactive({
    name: ''
})

const table = reactive({
    data: [],
    selected: [],
    pagination: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        total: 0
    }
})

const handleSelectionChange = (val) => {
    table.selected = val
}

const handleSizeChange = (val) => {
    table.pagination.pageSize = val
    loadData()
}

const handleCurrentChange = (val) => {
    table.pagination.currentPage = val
    loadData()
}

const handleClickTableRow = (row) => {
    if (props.single) {
        datagrid.value.clearSelection()
    }
    datagrid.value.toggleRowSelection(row)
}

const loadData = () => {
    let params = {
        name: query.name,
        page: table.pagination.currentPage,
        pageSize: table.pagination.pageSize
    }
    http.fetchForm({
        url: '/pub/company/queryGrid',
        data: params
    }).then((res) => {
        table.data = res.data.grid
        table.pagination.total = res.data.total
    })
}

const importanceFormatter = (row, column, cellValue, index) => {
    let data = row[column.property]
    if (data == 0) {
        return '一般'
    } else {
        return '重要'
    }
}

const dateFormatter = (row, column, cellValue, index) => {
    if (row[column.property] != null && row[column.property] != '') {
        return dateFormat.gridDatetimeFormat(row, column)
    }
}

const doSub = () => {
    let selected = table.selected
    if (selected.length == 0) {
        ElNotification({
            title: '提示',
            message: '请选择',
            type: 'info'
        })
        return
    }
    emit('select', selected)
}

const reset = () => {
    query.username = ''
    loadData()
}

onMounted(() => {
    loadData()
})
</script>
<style scoped>
@import '@/assets/css/list-cpt.css';
</style>
